<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<style nonce="#{cspNonce}">
			@font-face {
				font-family: 'codicon';
				font-display: block;
				src: url('#{webroot}/codicon.ttf?2ab61cbaefbdf4c7c5589068100bee0c') format('truetype');
			}
			@font-face {
				font-family: 'glicons';
				font-display: block;
				src: url('#{root}/dist/glicons.woff2?8e33f5a80a91b05940d687a08305c156') format('woff2');
			}
		</style>
	</head>

	<body class="preload" data-placement="#{placement}">
		<div class="commit-detail-panel scrollable">
			<div class="commit-detail-panel__none" id="empty" aria-hidden="true">
				<p>Rich details for commits and stashes are shown as you navigate:</p>

				<ul class="bulleted">
					<li>lines in the text editor</li>
					<li>
						commits in the <a href="command:gitlens.showGraph">Commit Graph</a>,
						<a href="command:gitlens.showTimelineView">Visual File History</a>, or
						<a href="command:gitlens.showCommitsView">Commits view</a>
					</li>
					<li>stashes in the <a href="command:gitlens.showStashesView">Stashes view</a></li>
				</ul>

				<p>Alternatively, search for or choose a commit</p>

				<p class="button-container">
					<span class="button-group">
						<button class="button button--full" type="button" data-action="pick-commit">
							Choose Commit...
						</button>
						<button
							class="button"
							type="button"
							data-action="search-commit"
							aria-label="Search for Commit"
							title="Search for Commit"
						>
							<code-icon icon="search"></code-icon>
						</button>
					</span>
				</p>

				<!-- banner
				<h2>Best practice</h2>
				<p>To best take advantage of this view, we highly recommend moving it to the Secondary Side Bar.</p> -->
			</div>
			<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
				<div class="commit-details__top">
					<div class="commit-details__top-menu">
						<div class="commit-details__actionbar">
							<div class="commit-details__actionbar-group">
								<a
									class="commit-action"
									href="#"
									data-action="pin"
									aria-label="Pin this Commit"
									title="Pin this Commit"
									><code-icon icon="pin" data-region="commit-pin"></code-icon
								></a>
								<a class="commit-action" href="#" data-action="back" aria-label="Back" title="Back"
									><code-icon icon="arrow-left" data-region="commit-back"></code-icon
								></a>
								<a
									class="commit-action"
									href="#"
									data-action="forward"
									aria-label="Forward"
									title="Forward"
									><code-icon icon="arrow-right" data-region="commit-forward"></code-icon
								></a>
								<a class="commit-action commit-action--emphasis-low" href="#" title="View this Commit"
									><code-icon icon="git-commit"></code-icon><span data-region="commit-hint"></span
								></a>
							</div>
							<div class="commit-details__actionbar-group">
								<a
									class="commit-action"
									href="#"
									data-action="commit-actions"
									data-action-type="sha"
									aria-label="Copy SHA
	[⌥] Pick Commit..."
									title="Copy SHA
	[⌥] Pick Commit..."
								>
									<code-icon icon="git-commit"></code-icon>
									<span class="commit-details__sha" data-region="shortsha"></span
								></a>
								<a
									class="commit-action"
									href="#"
									data-action="commit-actions"
									data-action-type="scm"
									aria-label="Open SCM view"
									title="Open SCM view"
									><code-icon icon="source-control"></code-icon
								></a>
								<a
									class="commit-action"
									href="#"
									data-action="commit-actions"
									data-action-type="graph"
									aria-label="Open in Commit Graph"
									title="Open in Commit Graph"
									><code-icon icon="gl-graph"></code-icon
								></a>
								<a
									class="commit-action"
									href="#"
									data-action="commit-actions"
									data-action-type="more"
									aria-label="Show Commit Actions"
									title="Show Commit Actions"
									><code-icon icon="kebab-vertical"></code-icon
								></a>
							</div>
						</div>
						<ul class="commit-details__authors" aria-label="Authors">
							<li class="commit-details__author" data-region="author">
								<skeleton-loader></skeleton-loader>
							</li>
						</ul>
					</div>
				</div>
				<div class="commit-details__message">
					<p class="commit-details__message-text scrollable" data-region="message">
						<skeleton-loader></skeleton-loader>
					</p>
				</div>

				<webview-pane collapsable expanded data-region="rich-pane">
					<span slot="title">Autolinks</span>
					<span slot="subtitle" data-region="autolink-count"></span>
					<div class="commit-details__rich" data-region="rich-info" aria-hidden="true">
						<p>
							<code-icon icon="info"></code-icon>&nbsp;Use
							<a href="#" data-action="autolink-settings" title="Configure autolinks">autolinks</a>
							to linkify external references, like Jira issues or Zendesk tickets, in commit messages.
						</p>
					</div>
					<div class="commit-details__rich" data-region="autolinks">
						<section
							class="commit-details__autolinks"
							aria-label="Custom Autolinks"
							data-region="custom-autolinks"
						>
							<skeleton-loader lines="2"></skeleton-loader>
						</section>
						<section
							class="commit-details__pull-request"
							aria-label="Pull request"
							data-region="pull-request"
						>
							<skeleton-loader lines="2"></skeleton-loader>
						</section>
						<section class="commit-details__issue" aria-label="Issue" data-region="issue">
							<skeleton-loader lines="2"></skeleton-loader>
						</section>
					</div>
				</webview-pane>

				<webview-pane class="commit-details__files" collapsable expanded>
					<span slot="title">Files changed </span>
					<span slot="subtitle" data-region="stats"></span>
					<action-nav slot="actions">
						<action-item data-switch-value="tree" label="View as Tree" icon="list-tree"></action-item>
					</action-nav>

					<ul class="change-list" data-region="files">
						<li class="change-list__item commit-details__item-skeleton">
							<skeleton-loader></skeleton-loader>
						</li>
						<li class="change-list__item commit-details__item-skeleton">
							<skeleton-loader></skeleton-loader>
						</li>
						<li class="change-list__item commit-details__item-skeleton">
							<skeleton-loader></skeleton-loader>
						</li>
					</ul>
				</webview-pane>

				<webview-pane collapsable data-region="explain-pane">
					<span slot="title">Explain (AI)</span>
					<span slot="subtitle"><code-icon icon="beaker" size="12"></code-icon></span>
					<action-nav slot="actions">
						<action-item data-action="switch-ai" label="Switch AI Model" icon="hubot"></action-item>
					</action-nav>

					<div class="pane-content">
						<p>Let AI assist in understanding the changes made with this commit.</p>
						<p class="button-container">
							<span class="button-group">
								<button class="button button--full" type="button" data-action="explain-commit">
									<code-icon icon="loading" modifier="spin"></code-icon>Explain this Commit
								</button>
							</span>
						</p>
						<div class="ai-content" data-region="commit-explanation"></div>
					</div>
				</webview-pane>
			</main>
		</div>
		#{endOfBody}
	</body>
</html>
